<template>
  <lay-container fluid="true" style="padding: 10px;height: 100%;overflow-y: hidden">
    <div class="maintable-box"  >

<lay-table
    :height="'100%'"
    even
    :page="page"
    :columns="columns"
    :dataSource="dataSource"
    :default-toolbar="defaultToolbar"
    v-model:selectedKey="selectedKey"
    v-model:selectedKeys="selectedKeys"
    :rowClassName="rowClassName"

    @row="rowClick"
    @Change="pageChange"
    @sortChange="sortChange"
>
  <template v-slot:toolbar>
    <lay-row>
      <lay-col :md="18">

        <!--<lay-button size="sm">删除</lay-button> -->
      </lay-col>
      <lay-col style="text-align:right;">


        <lay-button prefix-icon="layui-icon-export" suffix-icon=""
                    @click="tableExport"
        >导出</lay-button>

      </lay-col>
    </lay-row>

  </template>
  <template v-slot:imgurl="{ data }">
    <lay-icon :type="data.imgurl"></lay-icon>
  </template>

  <template v-slot:operator="{ }">

  </template>

</lay-table>

</div>
  </lay-container>
</template>

<script lang="ts">
import { ref, watch,reactive,onMounted,h } from 'vue'
import { layer } from '@layui/layer-vue'
import MyHttp from "../../library/MyHttp";
import MyWin from "../../library/MyWin";
import MyPage from "../../library/MyPage";
import {DateUtil} from "../../library/DateUtil";
import {MySimpleExport,TableColumn} from "../../library/MySimpleExport";



export default {
 
  setup(prop:any, context:any) {

    const baseUrl="/commdevice";
    const baseQUrl=baseUrl+"/propvaluepage";
    const pageName="监测数据";

    const myWin=ref<any>(null);
    const selectedKey = ref<any>("")
    const selectedKeys = ref<any>([])
    const defaultToolbar = ref(false)
    const page = ref(  new MyPage()  );
     
    const columns = [

      // {
      //   title: '选择',
      //   width: '50px',
      //   type: 'radio',
      //   fixed: 'left'
      // },
      {
        title: '序号',
        width: '50px' ,
        key: 'rowNo'
      },
      

      { key:'crtDt',title: '数据时间', width: '100px', },
     
      { key:'sv',title: '值', width: '60px', },
      { key:'state',title: '状态', width: '400px', },
        
    ]

    const dataSource = ref([]);

    const rowClick = function (data: any) {
      selectedKey.value=data.id;
    }

    const rowDoubleClick = function (data: any) {}
    const qm=reactive({
      
      key:prop.id,
      dtb:DateUtil.todayStr(),
      dte:DateUtil.todayStr(),
      page: 1,
      pageSize: 10,
      sortFields:"id desc"
    });
    const pageChange = function ({ current, limit }: any) {
      if(qm.pageSize!=limit)
      {
        qm.pageSize=limit ;
        qm.page=1;
        query(qm,1);
      }else{
        query(qm,current)
      }


    }
     
 
    const query=async (q:any,pageIndex:number) =>{

      qm.key=q.key
      qm.dtb=q.dtb
      qm.dte=q.dte

      if(pageIndex){
        page.value.current=pageIndex;
        qm.page=pageIndex;
      }
      if (""==qm.dtb||""==qm.dte){
          MyWin.alert("日期必须输入",{})
        return
      }
      var r=await new MyHttp().page(baseQUrl,qm,
          {
          },
          columns
      );
      dataSource.value=r.data.records
      page.value.total=r.data.totalRow
    }


    const sortChange = (key: any, sort: number) => {
      qm.sortFields=`${key} ${sort}`;
      query(qm,0);
    }
    const tableExport=async()=>{

      var cols=columns as Array<TableColumn>;
      new MySimpleExport().exportExcel(
          {
            qm,
            url:baseQUrl,
            name:pageName,
            columns:cols,
            lx:"page"
          }
      );
    }


    const rowClassName=(row:any, rowIndex:number):string=>{
      if(row.id==selectedKey.value){
        return "";        //RowSelected
      }
      else{
        return "";
      }
    }
    const toSubmit=(event:any)=>{
        console.info(event)
    }

    onMounted(() =>{
      myWin.value=new MyWin();
      
    });
    return {
      columns,
      dataSource,
      selectedKey,
      selectedKeys,
      defaultToolbar,
      page,
      rowClick,
      rowDoubleClick,
      pageChange,
      

      qm,
      query,

      sortChange,
      tableExport,

      myWin,
      rowClassName,
      toSubmit,


    }
  }
}
</script>
<style  scoped >

.maintable-box{
  height: calc(100% -  10px);
}

</style>